<template>
  <div class="main">
    <div class="classify">
      <Title title="地产详细" icon="el-icon-s-home"></Title>
      <div class="detail">
        <el-row type="flex">
          <el-col :span="14">
            <el-row>{{ BuildingDetail.title }} &nbsp; &nbsp; 优惠价 :{{BuildingDetail.price}} </el-row>
            <!-- 主图 -->
            <el-row
              type="flex"
              class="content-img"
              justify="center"
              align="middle"
            >
              <img
                :src="BuildingDetail.image"
                @click="$router.push('/property?id=?')"
                alt=""
              />
            </el-row>
          </el-col>
          <el-col>
            <div class="borders">
              <el-row type="flex" justify="center">
                <img
                  v-for="item in BuildingDetail.photos"
                  :key="item.id"
                  :src="item.url || item"
                  alt=""
                  class="auxiliary"
                />  
              </el-row>
              <el-row type="flex" justify="center"
                >房产详细 <br>{{ BuildingDetail.desc }}</el-row
              >
            </div>
          </el-col>
        </el-row>
        <hr />
        <!-- 详细富文本 -->
        <el-row class="ql-editor"  v-html="BuildingDetail.content"> </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/title";
import { getBuildingDetailById } from "@/api/building";
export default {
  components: { Title },
  data() {
    return {
      BuildingDetail: {},
    };
  },
  async created() {
    //渲染
    this.getBuildingDetailInit();
  },
  methods: {
    //房产详细封装
    async getBuildingDetailInit() {
      const { data } = await getBuildingDetailById(this.$route.query.id);
      this.BuildingDetail = data;
      console.log(this.BuildingDetail);
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-bottom: 15px;
}
.classify {
  width: 1200px;
  margin: 0 auto;
}
.detail {
  margin-top: 15px;

  border: 1px solid #666;
  img {
    margin: 0px;
    width: 100%;
  }
}
.auxiliary {
  height: 100px;
  width: 100px;
  padding: 5px;
}
</style>
